<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引用Vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="../js/axios.js"></script>
        <script type="text/javascript" src="../js/qs.js"></script>
        
<style>
* {
	margin: 0;
	padding: 0;
}

.app {
	width: 750px;
	height: 500px;
}

.portlet-default {
	padding: 20px;
}
.avatar-uploader 
.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
        
 </head>

<body>
			<div id="app" class="app">
		<div class="portlet-heading portlet-default">
			<h4 class="modal-title text-dark" align="center">
				<span set-lan="html:产品管理权限"></span>
			</h4>
			<hr class="border-t-a">
		</div>
	<div tabindex="-1" class="modal fade headersearch-modal-sm in"
		id="centerpop_popview" role="dialog" aria-hidden="true"
		aria-labelledby="mySmallModalLabel" style="display: block;">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" id="centerpop_Title">角色权限设置</h4>
				</div>
				<div class="modal-body" id="centerpop_cont">
					<div class="fomdiv" >
						<p>
							<b>产品管理权限</b>
						</p>
						<p>说明：</p>
						<ol>
							<li>产品管理权限</li>
							<li><font color="#000000">在产品列表中查看，在编辑报价单明细、订单明细时可查看选择</font>
							</li>
							<li><font color="#000000">新建产品和编辑产品时可选择产品</font>
							</li>

						</ol>

						<el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-form">
						<div id="div_dAE8k">						
							 <el-form-item label="" prop="value5">
							<template>
							    <el-select  v-model="form.value5" multiple
								placeholder="请选择"> <el-option
								v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value"> </el-option> </el-select>
								</template>								
								</el-form-item>
						</div>				
						<p class="text-center">
							  <el-button type="primary" @click="submitForm('form')">设置</el-button> 
						</p>						
					</el-form>
				 	</div>
	<script>
			var vm = new Vue({
				el: ".fomdiv",
				data() {
					return {
						options:[],			
						//value5:[],
						form: {
							value5:[]
						},
						//验证规则
						rules: { //数据源model
							
						}

					};
        },
				methods: {
					submitForm(formName) {
						//验证方法
						this.$refs[formName].validate((valid) => {
							if(valid) {
								//post提交数据
								axios.post("/selsepsersreon",
									//参数转换
									Qs.stringify(this.form, {
										arrayFormat: 'brackets'
									})
									
								).then(function(v) {
									alert(v);
									if(v.data==1){
										alert("设置维修权限成功");
									}else{
										alert("设置维修权限失败");
									}
								}).catch(function(e) {
									alert("出错了"+e);
								});

							} else {
								console.log('error submit!!');
								return false;
							}
						});
						/* window.close();
						parent.location.reload();  */
					}					
				},
				mounted() {
					var linkman = ${findUser};
					if(linkman){
						for(var xm in linkman){
							//alert(linkman[xm].value);
							this.options.push(linkman[xm]);
						}			
					}
					
				}
			});
		</script>
			
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
	</div>
	</div>
</body>

</html>